<script lang="ts">
	import { createEventDispatcher, onDestroy } from 'svelte';
	import Picture from '$components/basic/picture/picture.svelte';
	import IconButton from '@smui/icon-button';
	import { classMap } from '@smui/common/internal';
	import Button from '@smui/button';
	import Product from '../product/product.svelte';

	export let images: { url?: string; name: string }[] = [{ url: '', name: '' }];
	export let style = '';
	export let itemStyle = '';
	export let duration = 3;
	export let len = 1;
	export let showCursor = true;
	export let showArrows: 'inside' | 'outside' | 'none' = 'inside';

	let currentIndex = 0;
	let arrowDirection = 1;
	let startAnimation = false;
	let internalStyle = {
		left: '0;',
		width: `calc(var(--item-width) * ${images.length});`,
		transition: 'all 0.5s ease-in-out;'
	};
	let animationTimeOut: NodeJS.Timeout | undefined = undefined;

	const dispatch = createEventDispatcher();
	function onClick(item: IObject) {
		dispatch('clickItem', item);
	}

	const frame = () => {
		const range_len = images.length - len + 1;
		currentIndex = (range_len + currentIndex + arrowDirection) % range_len;
		console.log(
			'currentIndex: ',
			currentIndex,
			'arrowDirection: ',
			arrowDirection,
			'range_len: ',
			range_len
		);

		internalStyle.left = `calc(var(--item-width) * ${currentIndex} * -1)`;
	};

	function circle() {
		if (animationTimeOut) clearInterval(animationTimeOut);
		animationTimeOut = setInterval(frame, 1000 * duration);
	}

	function toLeft() {
		clearInterval(animationTimeOut);
		arrowDirection = -1;
		frame();
		if (startAnimation) {
			arrowDirection = 1;
			circle();
		}
	}

	function toRight() {
		clearInterval(animationTimeOut);
		arrowDirection = 1;
		frame();
		if (startAnimation) {
			circle();
		}
	}

	$: images.length > 1 && startAnimation && circle();

	const clearAnimation = () => clearInterval(animationTimeOut);

	onDestroy(clearAnimation);
</script>

<div class="w-full flex-cc gap-3px">
	{#if showArrows === 'outside'}
		<div class="py-3px h-full">
			<Button on:click={toLeft} class="h-full">
				<div class="material-symbols-outlined">arrow_back_ios</div>
			</Button>
		</div>
	{/if}
	<div class="carousel overflow-hidden relative" style={style + ';--preview-len: ' + len + ';'}>
		{#if showArrows === 'inside'}
			<div
				class="w-60px h-60px absolute left-5px top-1/2 -translate-y-1/2 z-999 opacity-0 hover:opacity-100 transition-opacity duration-300"
			>
				<IconButton
					class="material-symbols-outlined color-blue-7 w-60px h-60px font-size-30px! font-bold"
					on:click={toLeft}>arrow_circle_left</IconButton
				>
			</div>
			<div
				class="w-60px h-60px absolute right-5px top-1/2 -translate-y-1/2 z-999 opacity-0 hover:opacity-100 transition-opacity duration-300"
			>
				<IconButton
					class="material-symbols-outlined color-blue-7 w-60px h-60px font-size-30px! font-bold"
					on:click={toRight}>arrow_circle_right</IconButton
				>
			</div>
		{/if}

		{#if showCursor}
			<div
				class="carousel-cursor cursor-list w-60% flex-cc absolute bottom-15px left-50% -translate-x-1/2 z-999 gap-5px"
			>
				{#each Array(images.length).fill('') as _unused, cursor}
					<div
						class={classMap({
							'carousel-cursor__item': true,
							'carousel-cursor__item--active': cursor === currentIndex
						})}
					></div>
				{/each}
			</div>
		{/if}

		<div
			class="carousel-wrapper flex flex-row"
			style={Object.entries(internalStyle)
				.map(([key, value]) => `${key}: ${value}`)
				.join(';')
				.concat(style)}
		>
			{#each images as item}
				<button
					style={itemStyle}
					on:click={() => onClick(item)}
					class="h-full outline-none! border-none bg-transparent carousel-item cursor-pointer"
				>
					{#if !item.url && item.title}
						<Product detail={item} style="" showTip={false} />
					{:else}
						<Picture
							src={item.url}
							alt={item.name}
							style="background: transparent;"
							class=" shadow-blue-700/50 hover:shadow-lg hover:scale-106 hover:rounded-xl transition-all duration-300"
						></Picture>
					{/if}
				</button>
			{/each}
		</div>
	</div>
	{#if showArrows === 'outside'}
		<div class="py-3px h-full">
			<Button on:click={toRight} class="h-full">
				<div class="material-symbols-outlined">arrow_forward_ios</div>
			</Button>
		</div>
	{/if}
</div>

<style lang="scss">
	.carousel {
		--item-width: 400px;
		--item-height: var(--item-width);
		--offset-x: var(--item-width);
		--preview-len: 1;
		--i: 0;

		height: var(--item-height);
		width: calc(var(--item-width) * var(--preview-len));

		&-wrapper {
			position: absolute;
			height: var(--item-height);
			top: 0;
			left: 0;
			width: var(--item-width);
		}

		&-item {
			height: var(--item-height);
			width: var(--item-width);
		}

		&-cursor {
			--h-cursor: 6px;

			height: var(--h-cursor);

			&__item {
				width: 40px;
				background-color: #f3f4f6;
				height: var(--h-cursor);

				&--active {
					background-color: #9ca3af;
				}
			}
		}
	}
</style>
